<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../jquery-1.7.2.min.js"></script>
    <script>
        $(function () {
//            一\操作内容   html() val()
//            穿值就是赋值.不传参数就是取值
            $('.box').html('这是啥');//oBox.innerHTML = '这是啥';
//            alert($('.box').html());

            $('input').eq(0).val('xingming');
            var pwd = $('input').eq(1).val();
            console.log(pwd);

//            二\操作属性  attr('属性名','属性值') setAttribute()
//                         attr('属性名')   getAttribute();

            $('.box').attr('index',123);
            var className = $('.box').attr('class');
            console.log(className);

//            三/ css样式
//                        获取:css('样式名')
//                        设置: 1,css('样式名','样式值');
//                              2.css({'样式名':'样式值','样式名':'样式值'})
//            $('.box').css({'background':'red','width':300,'height':'300px'})

//            四/操作class    addClass('类名没有点') removeClass('类名没有点')
            $('.box').addClass('bgred');
            $('.box').removeClass('box');
        })

    </script>
    <style>
        .box {
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
        .bgred{
            background: red;
        }
    </style>
</head>
<body>
姓名:<input type="text" name="" id=""/><br/>
密码:<input type="text" name="" id=""/><br/>

<div class="box">

</div>


</body>
</html>